<script>
import { ref } from 'vue';
import { useRouter,useRoute } from 'vue-router';
import { listAddress } from '@/api/index';
import { reactive } from 'vue';
import { toRefs } from 'vue';
export default {
    setup() {
        const chosenAddressId = ref(10);
        const router = new useRouter();
        const route = new useRoute();
        const loading = ref(false);
        const finished = ref(false);
        const curPage = ref(1);
        const onClickLeft = () => router.back();
        const businessid = route.query.businessid;
        const state = reactive({
            list: []
        })

        const getAddressList = async (pageNum,pageSize) => {
            try {
                const response = await listAddress({
                    pageNum: pageNum,
                    pageSize: pageSize
                });

                for (let i = 0; i < response.data.records.length; i++) {

                    let newAddress = reactive({
                        id: '',
                        name: '',
                        tel: '',
                        address: '',
                        isDefault: false
                    })

                    newAddress.id = response.data.records[i].daId;
                    newAddress.name = response.data.records[i].contactName;
                    newAddress.tel = response.data.records[i].contactTel;
                    newAddress.address = response.data.records[i].address;
                    newAddress.isDefault = false;
                    if (i == 0 && curPage.value == 1) {
                        newAddress.isDefault = true;
                    }
                    state.list.push(newAddress);
                }

                if(state.list.length >= response.data.total){
                    finished.value = true;
                }

                console.log(state.list);
            } catch (error) {
                console.error('获取地址时出错:', error);
            }
        };

        getAddressList();

        const onAdd = () => router.push('/addaddress');
        const onEdit = (item) => {
            console.log(item);
            let str = item.address.split(' ');
            console.log(str);
            router.push({
                path: '/editaddress', query: {
                    id: item.id,
                    province: str[0],
                    city: str[1],
                    county: str[2],
                    name: item.name,
                    tel: item.tel,
                    addressDetail: str[3]
                }
            });
        }

        const onLoad = () => {
            loading.value = true;
            curPage.value += 1;
            getAddressList(curPage.value,10);
            setTimeout(() => {
                loading.value = false;
            }, 1000);

        };

        const doSelect = (index) => {
            
            console.log("address:", index.id);
            router.push({path:'/confirmorder',query:{addressId:index.id,address:index.address,
                addressName:index.name,addressTel:index.tel,businessid:businessid}})
        }

        return {
            ...toRefs(state),
            onAdd,
            onEdit,
            chosenAddressId,
            onClickLeft,
            loading,
            finished,
            onLoad,
            doSelect,
            businessid
        };
    },
};


</script>

<template>
    <div class="container" style="background-color: #f6f6f6;">
        <van-nav-bar title="我的地址" left-text="返回" left-arrow @click-left="onClickLeft" /> 
            <van-list v-model:loading="loading" :finished="finished" :immediate-check="false" finished-text="没有更多了"
                @load="onLoad" :offset="10">
                <van-address-list style="padding-bottom:5px ;" class="address-list" v-model="chosenAddressId" :list="list" default-tag-text="默认"
                        @add="onAdd" @edit="onEdit" @select="doSelect" />
            </van-list>
    </div>

</template>

<style lang="scss" scoped>

</style>
